<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <h1>h1</h1>
    <H1>h1</H1>
    <compa></compa>
    <hr>
    <div id="app">
        <h3>new Vue 容器</h3>
        <hr>
        <!-- 
            组件名称同样具有无痕迹特性，程序一旦运行，只有保留组件本身的模板代码
            不保留组件自定义标签代码
        -->
        <compa v-for="(item, index) in 5" :key="index"></compa>
        <!-- <compa></compa>
        <compa></compa> -->
        <!-- <film-item></film-item> -->
        <hr>
        <comp-b></comp-b>
        <hr>
        <p>new Vue 最后代码</p>
    </div>
    <template id="compA">
        <div itany="aaa">
            <p>数据msg:{{ msg }}</p>
            <input type="text" v-model="msg">
            <comp-b></comp-b>
        </div>
    </template>
    <template id="compB">
        <div itany="aaa">
            <p>数据info:{{ info }}</p>
            <!-- <comp-b></comp-b> -->
        </div>
    </template>
</body>
<script>

    var CompA = Vue.extend({
        template: "#compA",
        data() {
            return {
                msg: "数据"
            }
        },
        beforeCreate() {
            console.log("CompA被创建了一个新实例")    
        },
    });
    // new CompA();
    // new CompA();
    // Vue.component(id, [definition] )
    //      id 取值为 string 1、为当前组件提供唯一名称定义
    //                       2、定义的名称将作为组件在 其它vue实例容器中 使用时的 自定义标签
    //                          标签在页面的每次调用都相当于组件的实例创建
    //  `                       页面的组件标签调用，会自动完成 挂载操作，此时标签在页面的位置就是当前实例的页面位置
    //                          （web component api => 阮一峰的教程）
    //          如果取值为遵循JS构成的驼峰字符串 ，在定义组件时会统一转为 连字符标签
    //          例子： 组件名 FilmItem  ==>  <film-item>
    Vue.component("compa", CompA);
    Vue.component("FilmItem", CompA);
    // definition  取值 Object | Function
    //      Function 取值为 Vue.extend 返回的 vue实例构造器方法
    //      Object 取值为 extend(extendOptions) extendOptions 配置项
    //          当前取值为 Obejet 时, Vue.component 会执行一次 隐式 Vue.extend 调用
    Vue.component("compC", {
        template: "#compB",
        data(){
            return {
                info:"compB"
            }
        }
    })

    new Vue({
        el: '#app'
    });
</script>

</html>